<template>
	<!-- <view>
		<button type="primary" @click="getIDCard()">点击识别身份证</button>
		<button type="primary" @click="takePhoto()">点击拍照</button>
	</view> -->
	<view class="">
		<picker class="flex rcb" @change="changeLoadingType" :value="index" :range="loadingTypeArray">
			<view>当前动画：</view>
			<view class="picker">
				{{loadingType}}
			</view>
		</picker>
		<view v-if="showLoader">
			<!-- 加载动画页 -->
			<mht-loader :loadingType="loadingType"></mht-loader>
		</view>
	</view>
</template>
<script>
	import loading from '../../components/xuan-loading/xuan-loading.vue'
	import mhtLoader from '../../components/mht-loader/mht-loader.vue'
	export default {
		components: {
			loading,
			mhtLoader
		},
		data() {
			return {
				showLoader: true,
				loadingType: 'jumping',
				loadingTypeArray: ['rectangle', 'satellite', 'jumping', 'arrow-circle', 'circle', 'circle-side', 'ball-scale',
					'ball-circle', 'heart', 'ball-rotate', 'ball-pulse'
				]
			}
		},
		mounted() {

		},
		methods: {
			changeLoadingType(e) {
				// rectangle、satellite、jumping、arrow-circle、circle、circle-side、ball-scale、ball-circle、heart、ball-rotate、ball-pulse
				uni.hideKeyboard();
				this.index = e.detail.value;
				this.loadingType = this.loadingTypeArray[this.index];
			}
		}
	}
</script>

<style scoped>
	.test {
		animation: 1s aaa infinite;
	}

	@keyframes aaa {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	.content {}
</style>
